<template>
    <div class="support-right" v-if="async">
        <input class="support-right_head" v-model="customerMatter.name" v-if="customerMatter"
            @input="selectChange('name')">
        <div class="support-right_posibox">
            <div class="support-right_vto">
                <div class="support-right_vli">
                    <img class="support-right_vimg" :src="selectObjct['statuss'].icon" v-if="selectObjct['statuss']" />
                    <div class="support-right_vbox">
                        <div class="support-right_vt1">{{ selectModel('statuss', customerMatter.status) }}</div>
                        <div class="support-right_vt2">当前状态</div>
                    </div>
                    <div class="support-right_block">
                        <el-select class="support-select_cxt" v-model="customerMatter.status" placeholder="全部"
                            size="mini" @change="selectChange('status')">
                            <el-option class="support-select_conter" v-for="item in condition.statuss" :key="item.key"
                                :label="item.value" :value="item.key">
                                <div class="support-select_mli">
                                    <img class="support-select_cImg" :src="item.icon" />
                                    <span class="support-select_cTxt">{{ item.value }}</span>
                                </div>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="support-right_vli">
                    <img class="support-right_vimg" :src="selectObjct['employees'].icon"
                        v-if="selectObjct['employees']" />
                    <div class="support-right_vbox">
                        <div class="support-right_vt1">{{ selectModel('employees', customerMatter.userId) }}</div>
                        <div class="support-right_vt2">处理人</div>
                    </div>
                    <div class="support-right_block">
                        <el-select class="support-select_cxt" v-model="customerMatter.userId" placeholder="全部"
                            size="mini" @change="selectChange('userId')">
                            <el-option class="support-select_conter" v-for="item in condition.employees" :key="item.key"
                                :label="item.value" :value="item.key">
                                <div class="support-select_mli">
                                    <img class="support-select_cImg" :src="item.icon" />
                                    <span class="support-select_cTxt">{{ item.value }}</span>
                                </div>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="support-right_vli">
                    <img class="support-right_vimg" :src="selectObjct['helpUserId'].icon"
                        v-if="selectObjct['helpUserId']" />
                    <div class="support-right_vbox">
                        <div class="support-right_vt1">{{ selectModel('helpUserId', customerMatter.helpUserId) }}</div>
                        <div class="support-right_vt2">协助人</div>
                    </div>
                    <div class="support-right_block">
                        <el-select class="support-select_cxt" v-model="customerMatter.helpUserId" placeholder="全部"
                            size="mini" @change="selectChange('helpUserId')">
                            <el-option class="support-select_conter" v-for="item in condition.employees" :key="item.key"
                                :label="item.value" :value="item.key">
                                <div class="support-select_mli">
                                    <img class="support-select_cImg" :src="item.icon" />
                                    <span class="support-select_cTxt">{{ item.value }}</span>
                                </div>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="support-right_vli">
                    <img class="support-right_vimg" :src="selectObjct['priorities'].icon"
                        v-if="selectObjct['priorities']" />
                    <div class="support-right_vbox">
                        <div class="support-right_vt1">{{ selectModel('priorities', customerMatter.priority) }}</div>
                        <div class="support-right_vt2">优先级</div>
                    </div>
                    <div class="support-right_block">
                        <el-select class="support-select_cxt" v-model="customerMatter.priority" placeholder="全部"
                            size="mini" @change="selectChange('priority')">
                            <el-option class="support-select_conter" v-for="item in condition.priorities"
                                :key="item.key" :label="item.value" :value="item.key">
                                <div class="support-select_mli">
                                    <img class="support-select_cImg" :src="item.icon" />
                                    <span class="support-select_cTxt">{{ item.value }}</span>
                                </div>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="support-right_vli">
                    <i class="el-input__icon el-icon-date support-right_vicon"></i>
                    <div class="support-right_vbox">
                        <div class="support-right_vt1">{{ timeTranslate(customerMatter.createTime) }}</div>
                        <div class="support-right_vt2">开始时间</div>
                    </div>
                    <div class="support-right_block">
                        <el-date-picker @change="selectChange('createTime')" v-model="customerMatter.createTime"
                            format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime"
                            placeholder="选择日期时间"></el-date-picker>
                    </div>
                </div>
                <div class="support-right_vli">
                    <i class="el-input__icon el-icon-date support-right_vicon"></i>
                    <div class="support-right_vbox">
                        <div class="support-right_vt1">{{ timeTranslate(customerMatter.endTime) }}</div>
                        <div class="support-right_vt2">结束时间</div>
                    </div>
                    <div class="support-right_block">
                        <el-date-picker @change="selectChange('endTime')" v-model="customerMatter.endTime"
                            format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime"
                            placeholder="选择日期时间"></el-date-picker>
                    </div>
                </div>
            </div>
            <div class="support-right_buts">
                <div class="support-right_btadd" @click="appendTab">添加</div>
            </div>
        </div>
        <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="tabClick">
            <el-tab-pane label="消息" name="message">
                <div class="support-right-content" v-if="customerMatter">
                    <div class="support-right-mt">
                        <div class="support-right-buts" @click="updateCenter">{{ markdownFool ? '完成' : '编辑' }}</div>
                        <div class="support-right-buts" style="background-color: red;" @click="deleteChange">删除</div>
                    </div>
                    <x-markdown :class="{ 'content-xmarkdown': !markdownFool }" ref="x_markdown"
                        v-model="customerMatter.content" :editable="false" :toolbarsFlag="markdownFool"></x-markdown>
                </div>
                <div class="support-right_box">
                    <ul class="text-part_ul">
                        <li class="text-part_li" v-for="(item, index) in commentList" :key="index">
                            <div class="part_li-top">
                                <div class="part_li-p1">
                                    <img src="http://diyapi.5ug.com/wwwroot/static/images/avator/man_64.png" />
                                </div>
                                <div class="part_li-p2">
                                    <p class="li-p2_text">{{ item.userName }}</p>
                                    <p class="li-p2_intro">{{ item.createTime }}</p>
                                </div>
                                <div class="part_li-p3"></div>
                            </div>
                            <div class="part_li-cotx">
                                <div class="li-cotx_mtion">{{ item.content }}</div>
                                <!-- <ul>
									<li><i class="el-icon-paperclip"></i>下载.pdf</li>
									<li><i class="el-icon-paperclip"></i>下载.pdf</li>
								</ul> -->
                            </div>
                        </li>
                    </ul>
                </div>
            </el-tab-pane>
            <el-tab-pane label="动态" name="log">
                <el-timeline v-if="logs" style="margin:10px;">
                    <el-timeline-item v-for="(log, index) in logs" :key="index" :timestamp="log.createTime">
                        {{ log.name }}
                    </el-timeline-item>
                </el-timeline>
            </el-tab-pane>
            <el-tab-pane label="常见问题" name="problem" v-if="false">
                <el-collapse accordion>
                    <el-collapse-item v-for="(citem, cindex) in 10" :key="cindex">
                        <template slot="title">
                            一致性 Consistency
                        </template>
                        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                    </el-collapse-item>
                </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="教程" name="tutorial">
                <div class="support-right_matters">
                    <div class="support-right_mali" v-for="(qItem, qIndex) in customerMatter.tips" :key="qIndex">
                        {{ qIndex + 1 }}、{{ qItem.value }}</div>
                </div>
                <div class="support-right_gul">
                    <div class="support-right_gli" v-for="(gItem, gIndex) in customerMatter.tips" :key="gIndex">
                        <div class="support-right_gtxt">{{ gItem.value }}</div>
                        <i class="el-icon-arrow-right support-right_gicon"></i>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="晋升" name="promoteList">
                <el-alert title="只有全局事项才会有晋升教程，如果该事项是有必要则添加到全局事项中" type="success" />
                <div class="support-right_gul">
                    <div class="support-right_gli" v-for="(gItem, gIndex) in customerMatter.promotes" :key="gIndex">
                        <div class="support-right_gtxt">{{ gItem }}</div>
                        <i class="el-icon-arrow-right support-right_gicon"></i>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="信息" name="projectInfo">
                <el-table :data="projectInfo" style="width:100%;margin:0px 10px 50px 10px;" v-if="projectInfo">
                    <el-table-column prop="key" label="项目" align="right" width="180">
                    </el-table-column>
                    <el-table-column prop="value" label="信息">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <div class="support-right_footer">
            <div class="footer-editor">
                <x-markdown v-model="viewModel" ref="commentMarkdown" :subfield="false"></x-markdown>
            </div>
            <div class="editor-buts">
                <div class="editor-buts_left">
                    <el-button type="primary" @click="save" szie="mini"> 发 送
                    </el-button>
                    <i class="el-icon-paperclip buts_left-icon" titile="发送附件"></i>
                    <i class="el-icon-location-outline buts_left-icon"></i>
                </div>
            </div>
        </div>
        <support-pupop ref="support_pupop" @supportPupopInit="supportPupopInit"></support-pupop>
    </div>
</template>

<script>
import ala from 'ala'
import api from 'api'
import service from './../service'
import supportPupop from './support-pupop'
export default {
    components: {
        supportPupop
    },
    data() {
        return {
            data: {},
            customerMatter: null, //事项
            activeTab: 'message',
            projectInfo: [], // 项目信息
            logs: null, // 日志
            viewModel: null,
            condition: {},
            selectObjct: {},
            updateModel: {},
            commentList: {},
            markdownFool: false,
            async: false,
            nTitle: '',
            leftModel: null,
            setTimeModel: null
        }
    },
    beforeDestroy() {
        clearInterval(this.setTimeModel)
    },
    methods: {
        async init(data, leftModel) {
            this.data = data
            this.leftModel = leftModel
            this.customerMatter = await ala.httpId('Api/CustomerMatter/View', data.id)
            this.async = true
            this.condition = await service.condition()
            var this_ = this
            this.$refs.x_markdown.init(this_.customerMatter.conten)
        },
        timerChang() {
            var this_ = this
            this.setTimeModel = setTimeout(() => {
                this_.selectChange('content')
                clearInterval(this_.setTimeModel)
                this_.timerChang()
            }, 100)
        },
        async commentInit(data) {
            var commPage = await ala.httpId('Api/MatterComment/Page', data.id)
            this.commentList = commPage.result
        },
        async save() {
            let para = {
                matterId: this.customerMatter.id,
                content: this.viewModel
            }
            let result = await ala.diyHttpPost('Api/CustomerMatterComment/Edit', para)
            if (result.isSuccess) {
                // this.commentInit(this.customerMatter)
                ala.toast(result.message)
                if (this.$refs.commentMarkdown) {
                    this.$refs.commentMarkdown.init('')
                }
                this.viewModel = ``
                var commPage = await ala.httpId('Api/MatterComment/Page', this.data.id)
                this.commentList = commPage.result
            }
        },
        async tabClick(tab) {
            if (tab.name === 'log') {
                this.logs = await service.logs(this.customerMatter.id)
            }
            if (tab.name === 'projectInfo') {
                this.projectInfo = await service.project(this.customerMatter.id)
            }
        },
        selectModel(type, value) {
            if (this.condition) {
                var arr = null
                var helpUserType = type
                if (helpUserType === 'helpUserId') {
                    type = 'employees'
                }
                if (!this.condition[type]) {
                    return
                }
                if (!value) {
                    value = this.condition[type][0].key
                }
                arr = this.condition[type].filter(item => item.key === value)
                if (helpUserType === 'helpUserId') {
                    this.$set(this.selectObjct, helpUserType, arr[0])
                } else {
                    this.$set(this.selectObjct, type, arr[0])
                }
                if (arr.length === 0) {
                    return
                }
                return arr[0].value
            }
        },
        async updateCenter() {
            if (this.markdownFool) {
                this.selectChange('content')
                clearInterval(this.setTimeModel)
            } else {
                this.timerChang()
            }
            this.markdownFool = !this.markdownFool
        },
        timeTranslate(time) { //时间转化
            var date = new Date(time)
            var year = date.getFullYear()
            var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
            var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
            var timeText = `${year}-${month}-${day} ${hour}:${minute}`
            return timeText
        },
        async selectChange(type) {
            this.updateModel[type] = this.customerMatter[type]
            var repones = await service.update(this.customerMatter.id, type, this.updateModel[type])
        },
        appendTab() {
            this.$refs.support_pupop.open(this.customerMatter, this.leftModel)
        },
        supportPupopInit() { //添加成功执行
            this.$emit('supportRightChange')
        },
        async deleteChange() { //删除
            var repones = await service.deleteItem(this, this.customerMatter.id)
            if (repones.status === 1) {
                this.supportPupopInit()
            }
        }
    }
}
</script>

<style lang="scss">
@import "./support-right.scss";
</style>